<template>
  <div class="message-box-out">
    <div class="send-msg" v-if="type==='send'">
      <div class="message-content" v-html="msg"></div>
      <avatar class="avatar" :src="tx"></avatar>
    </div>
    <div class="receive-msg" v-if="type==='receive'">
      <avatar class="avatar" :src="tx"></avatar>
      <div class="message-content" v-html="msg"></div>
    </div>
    <div class="system-msg" v-if="type==='system'">
      <div class="message-content" v-html="msg"></div>
    </div>
  </div>
</template>

<script>
  import Avatar from './Avatar'

  export default {
    name: 'MessageItem',
    components: {Avatar},
    props: {
      msg: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'system'
      },
      msgtype: {
        type: String,
        default: 'text'
      },
      tx: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style scoped lang="scss">
  .message-box-out {
    /*margin-bottom: 10px;*/
    padding: 10px;

    .message-content {
      vertical-align: top;
      font-size: 14px;
      display: inline-block;
      max-width: calc(100% - 80px);
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      width: fit-content;
      text-align: left;
    }

    .avatar {
      width: 30px;
      height: 30px;
    }

    .send-msg {
      text-align: right;

      .avatar {
        margin-left: 10px;
      }

      .message-content {
        background-color: #ced4dc;
      }
    }

    .receive-msg {
      text-align: left;

      .avatar {
        margin-right: 10px;
      }

      .message-content {
        background-color: #ced4dc;
      }

    }

    .system-msg {
      text-align: center;

      .message-content {
        padding: 0 10px;
      }
    }
  }
</style>
